<template>
  <div v-for="(item, index) in gifts" :key="index" class="day-sign">
    <component
      :is="item.component"
      v-model="formData[item.key]"
      ref="giftRefs"
      v-if="item.component"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent, computed, watch } from 'vue'
import { getGiftDict } from '@/views/app/api/member'

const gifts = ref({})
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const emits = defineEmits(['update:modelValue'])
const formData = ref({})
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
const giftRefs = ref([])

watch(
  () => value.value,
  (nval, oval) => {
    if ((!oval || !Object.keys(oval).length) && Object.keys(nval).length) {
      formData.value = value.value
    }
  },
  { immediate: true }
)

watch(
  () => formData.value,
  () => {
    value.value = formData.value
  },
  { deep: true }
)

const modules: any = import.meta.glob('@/**/*.vue')

let data = {
  balance: {
    key: 'balance',
    name: '送红包',
    desc: '发放红包',
    component: '/src/views/app/views/member/components/gift-balance.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftBalanceDriver'
      }
    }
  },
  point: {
    key: 'point',
    name: '送积分',
    desc: '发放积分',
    component: '/src/views/app/views/member/components/gift-point.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      }
    }
  },
  growth: {
    key: 'growth',
    name: '送成长值',
    desc: '发放成长值',
    component: '/src/views/app/views/member/components/gift-growth.vue',
    grant: {
      driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_level: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.core.service.core.member.driver.GiftPointDriver'
      }
    }
  },
  shop_coupon: {
    key: 'shop_coupon',
    name: '优惠券',
    desc: '发放优惠券',
    component: '/src/views/addon/shop/views/member/components/gift-coupon.vue',
    grant: {
      driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
    },
    content: {
      admin: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_level: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_sign: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      },
      member_sign_continue: {
        driver: 'com.niu.shop.service.core.member.driver.GiftCouponDriver'
      }
    }
  }
}

Object.keys(data).forEach((key: string) => {
  console.log(data[key].component)

  data[key].component && (data[key].component = defineAsyncComponent(modules[data[key].component]))
})
gifts.value = data

// getGiftDict().then(({ data }) => {
//   Object.keys(data).forEach((key: string) => {
//     data[key].component &&
//       (data[key].component = defineAsyncComponent(modules[data[key].component]))
//   })
//   gifts.value = data
// })

const verify = async () => {
  let verify = true
  for (let i = 0; i < giftRefs.value.length; i++) {
    const item = giftRefs.value[i]
    !(await item.verify()) && (verify = false)
  }
  return verify
}

defineExpose({
  verify
})
</script>

<style lang="scss" scoped>
.day-sign:nth-child(1) :deep(.el-form-item__error) {
  left: 48px;
}
.day-sign:nth-child(2) :deep(.el-form-item__error) {
  left: 48px;
}
</style>
